<template>
  <div class="page-menu">
    <label v-for="item in menuList" :key="item.name" class="page-menu-item">
      <!-- 只有一级菜单 -->
      <el-menu-item v-if="!item.subMenuList"
                    :key="item.name"
                    :data="item"
                    :index="item.id"
                    :route="item.route"
                    @click="handleClick">
        <!--标题-->
        <template #title>
          <span class="home-slider-menu-tltle">{{ item.name }}</span>
        </template>
      </el-menu-item>
      <!--有多级菜单-->
      <el-sub-menu v-if="item.subMenuList" :key="item.name" :data="item" :index="item.id">
        <template #title>
          <span> {{ item.name }}</span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <nav-menu :menu-list="item.subMenuList" />
      </el-sub-menu>
    </label>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'NavMenu'
})
</script>
<script setup lang="ts">
import { ref, reactive, PropType, onMounted } from 'vue'
import { MenuProp } from '@/utils/menu'
import { useStore } from 'vuex'
const props = defineProps({
    menuList: {
        type: Array as PropType<MenuProp[]>,
        default: () => []
    }
})
const ref1 = ref('666')
const store = useStore()
const handleClick = (val: { index: string }) => {
    store.commit('setActiveMenu', val.index)
}
onMounted(() => {
    // sliderHeight.value = window.innerHeight - 60
})
// vue3 setup语法糖必须暴露出去才能在父组件通过ref获取
defineExpose({
    ref1,
    handleClick
})
</script>

<style lang="less" scoped>
.page-menu {
  .el-menu-item.is-active {
    background-color: @main-color !important;
  }
  .el-menu-item:hover {
    background-color: rgba(75, 145, 242, 0.6) !important;
  }
}
</style>
